import React, { Component } from "react";
import { connect } from "react-redux";
import userImg from "../images/user_img.png";
import { Link } from "react-router-dom";
import axios from "axios";
import message from "antd/lib/message";
import { RECORD_PERFORMANCE_DETAIL_LINK, LOGIN_LINK } from "../actions/types.js";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

// 战绩查询
class RecordPerformance extends Component {
  state = { matchObj: {} };
  componentDidMount() {
    axios.get(`/Tgh/data/match_query`).then(res => {
      let objYear = {};
      for (let i = 0; i < res.data.match.length; i++) {
        let year = moment(res.data.match[i].match_time).year();
        objYear[year] = res.data.match;
      }
      this.setState({ matchObj: objYear });
    });
  }
  componentWillUpdate(nextProps) {
    if (this.props.user === null && nextProps.user === null) {
      message.warning("请先进行登陆");
      this.props.history.push(LOGIN_LINK);
    }
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  render() {
    let nickName = "",
      img = userImg;
    if (this.props.user) {
      nickName = this.props.user.nickName;
      if (this.props.user.img) {
        img = `/images/${this.props.user.img}`;
      }
    }
    return (
      <section>
        <div className="top-title">
          <i className="fa fa-angle-left back" onClick={() => this.props.history.go(-1)} />
          战绩查询
        </div>
        <div className="performance-top">
          <div className="performance-user-img" style={{ backgroundImage: `url(${img})` }} />
          <div className="performance-user-name">
            你好，
            {nickName || "用户"}
          </div>
        </div>
        {this.renderPerformanceByYear()}
      </section>
    );
  }
  renderPerformanceByYear() {
    const { matchObj } = this.state;
    let performances = [];
    for (let i in matchObj) {
      performances.push(
        <React.Fragment key={i}>
          <div className="performance-time">
            <span className="time-border" />
            <span className="time-title">{i}年</span>
          </div>
          <div className="performance-section">{this.renderPerformance(matchObj[i])}</div>
        </React.Fragment>
      );
    }
    return <div>{performances}</div>;
  }
  renderPerformance(match) {
    return match.map(data => {
      let imgUrl = data.img;
      if (imgUrl.indexOf("http") === -1) {
        imgUrl = `/images/${imgUrl}`;
      }
      return (
        <Link
          to={`${RECORD_PERFORMANCE_DETAIL_LINK}/${data.match_id}`}
          className="performance-card"
          key={data.match_id}
        >
          <div className="performance-card-title">{data.match_name}</div>
          <div className="performance-card-detail">
            <div className="p-card-detail-img" style={{ backgroundImage: `url(${imgUrl})` }} alt="图标" width={67} />
            <div className="p-card-info-contain">
              <div>
                {/*<div className="p-card-info"><span style={{color:"#FC5458"}}>1</span><br/>排名</div>
                <div className="p-card-info"><span style={{color:"#FC5458"}}>-</span><br/>完成</div>*/}
                <div className="p-card-info">
                  <span style={{ color: "#FC5458" }}>{data.total || "-"}</span>
                  <br />
                  成绩
                </div>
              </div>
              <div>
                <i className="fa fa-clock-o fa-fw" />
                {data.match_time}
              </div>
              <div>
                <i className="fa fa-map-marker fa-fw" />
                {data.court_name}
              </div>
            </div>
          </div>
        </Link>
      );
    });
  }
}

function mapStateToProps(state) {
  const { user, error } = state.auth;
  return { user, error };
}
export default connect(mapStateToProps)(RecordPerformance);
